<template>
  <div>
    <!--筛选查询-->
    <div class="box">
      <div class="title">筛选查询</div>
      <div class="cont">
        <el-input v-model="search" style="width: 220px;margin-left:20px" placeholder="请输入单据号或供应商或备注"></el-input>

        <el-select v-model="auditStatus" placeholder="审单状态" class="sel">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>

        <el-select v-model="status" placeholder="付款状态" class="sel">
          <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>

        <span>日期:</span>
        <el-date-picker v-model="valueData" type="daterange" range-separator="To" start-placeholder="Start date"
          end-placeholder="End date" format="YYYY/MM/DD" value-format="YYYY-MM-DD" @change="gettime" />


        <el-button @click="init()" style="margin-left:20px">查询结果</el-button>
      </div>
    </div>

    <!--数据列表-->
    <div class="box">
      <div class="title" style="margin-top: 30px">
        <span>数据列表</span>
        <el-button class="enterpriseBtn" @click="updateAudit">反审核</el-button>
        <el-button class="enterpriseBtn" @click="updateAuditStatus">审核</el-button>
        <el-button class="enterpriseBtn" @click="del">删除</el-button>
        <el-button class="enterpriseBtn">打印</el-button>
        <el-button class="enterpriseBtn" @click="excleData">导出</el-button>
        <el-button class="enterpriseBtn" type="primary" @click="add">新增采购单</el-button>
      </div>

      <el-table :data="tableData" stripe border ref="tableRef" @selection-change="removeId"
        style="width: 100%; border: 1px solid #e0e0e0" :header-cell-style="{
          'text-align': 'center',
          'font-size': '16px',
          color: '#666666',
          borderColor: '#e0e0e0',
        }" :cell-style="{
          'text-align': 'center',
          'font-size': '14px',
          color: '#666666',
          borderColor: '#e0e0e0',
        }">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="billDate" label="单据日期" />
        <el-table-column prop="code" label="单据编号" />
        <el-table-column prop="supplierName" label="供应商" />
        <el-table-column prop="buyMoney" label="购货金额" />
        <el-table-column prop="rateMoney" label="优惠后金额" />
        <el-table-column prop="pay" label="已付款" />
        <el-table-column prop="status" label="付款状态" :formatter="statuFormatter" />
        <el-table-column prop="prepared" label="制单人" />
        <el-table-column prop="auditor" label="审核人" />
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <span class="btn" @click="update(row.id)">编辑</span>
            <span class="btn" @click="isdel(row.id)">删除</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--分页-->
    <div class="box" style="
        margin-top: 20px;
        border: 1px solid #e0e0e0;
        height: 50px;
        padding: 10px;
        box-sizing: border-box;
        padding-left: 1200px;
      ">
      <el-pagination :page-size="pageSize" :page-sizes="[10, 20, 30, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="chg" @current-change="chgpg" />
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { query, excel, deleteAll, updateAll } from "@/api/purchase/purchase.js";
import { useRouter } from "vue-router";
import host from "@/utils/env.js";
import { ElMessage, ElMessageBox } from "element-plus";
import { getUser } from '@/utils/session.js'


//属性
//表格引用
const tableRef = ref(null)
//路由跳转
const router = useRouter()
//审单状态
const options = [
  {
    value: 0,
    label: "全部",
  },
  {
    value: 1,
    label: "未审核",
  },
  {
    value: 2,
    label: "已审核",
  },
  {
    value: 3,
    label: "已拒绝",
  },
];

//付款状态
const statusOptions = [
  {
    value: 0,
    label: "全部",
  },
  {
    value: 1,
    label: "待付款",
  },
  {
    value: 2,
    label: "部分付款",
  },
  {
    value: 3,
    label: "已付款",
  },
];

//日期
const valueData = ref([])  //选择的日期数组


//采购列表
const tableData = ref([]);
//分页参数
const page = ref(1);
const pageSize = ref(10);
const total = ref(0);
//查询参数
const search = ref(); //单据号 供应商  备注
const status = ref(); //付款状态
const auditStatus = ref(); //审单状态
const beginTime = ref() //开始时间
const endTime = ref()  //结束时间
//当前登录的用户信息
let user = {}
//当前企业id
let eid = ref()

//方法

//每页显示的个数  每页的记录数
let chg = (pgsize) => {
  pageSize.value = pgsize;
  page.value = 1;
  init();
};
//页数发生变化  第几页
let chgpg = (pg) => {
  page.value = pg;
  init();
};

//付款状态格式化方法
let statuFormatter = (row) => {
  const type = row.status;
  if (type == 1) {
    return "待付款";
  } else if (type == 2) {
    return "部分付款";
  } else if (type == 3) {
    return "已付款";
  }
};

//获取日期方法
let gettime = (valueData) => { 
  if (valueData != null) {
    beginTime.value=valueData[0]
    endTime.value=valueData[1]
  } else {
    beginTime.value=''
    endTime.value=''
  }

}
//请求采购列表
let init = async () => {
  
  let data = {
    page: page.value,
    pageSize: pageSize.value,
    search: search.value,
    status: status.value,
    auditStatus: auditStatus.value,
    beginTime: beginTime.value,
    endTime: endTime.value,
    eid: eid.value,
  };

  let res = await query(data);
  tableData.value = res.data.list;

  //更新分页参数
  page.value = res.data.page;
  pageSize.value = res.data.pageSize;
  total.value = res.data.total;
};

//跳转添加采购单页面
let add = () => {
  router.push("/purchase/save")
}

//导出采购单
let excleData = async () => {
  let res = await excel({})
  if (res.code == 200) {
    let url = host + res.data;
    window.open(url);
  }

}

//跳转编辑
let update = (row) => {
  // console.log(row)
  // return;
  router.push({
    path: "/purchase/update",
    query: { id: row }
  })
}

//删除 传递的参数id数组
let list = []
//选中行
let removeId = (id) => {
  //要删除的id数组
  const arr = []

  id.forEach(r => {
    arr.push(r.id)
  });

  list = arr
}

//批量删除弹出框
let del = () => {

  if (list.length == 0) {
    ElMessage({
      message: "请选择要删除的采购单!",
      type: "warning",
    });
    return;
  }

  ElMessageBox.confirm("确认删除吗?")
    .then(() => {
      remove(list);
    })
    .catch(() => {
      // catch error
    });
};

//单个删除弹出框
let isdel = (id) => {
  ElMessageBox.confirm("确认删除吗?")
    .then(() => {
      remove(id);
    })
    .catch(() => {
      // catch error
    });
}

//删除方法
let remove = async (list) => {

  let res = await deleteAll(list)
  if (res.code == 200) {
    ElMessage({
      message: "删除成功",
      type: "success",
    });
    init();
  }
}

//审核
let updateAuditStatus = async () => {
  let data = {
    auditStatus: 2,
    list: list
  }

  if (list.length == 0) {
    ElMessage({
      message: "请选择要通过审核的采购单!",
      type: "warning",
    });
    return;
  }

  let res = await updateAll(data)
  if (res.code == 200) {
    ElMessage({
      message: "已通过审核",
      type: "success",
    });
    init();
  }
}

//反审核
let updateAudit = async () => {
  let data = {
    auditStatus: 3,
    list: list
  }

  if (list.length == 0) {
    ElMessage({
      message: "请选择要拒绝通过审核的采购单!",
      type: "warning",
    });
    return;
  }

  let res = await updateAll(data)
  if (res.code == 200) {
    ElMessage({
      message: "已拒绝通过审核",
      type: "success",
    });
    init();
  }
}

//生命周期函数
onMounted( async() => {
  user = getUser()
  eid.value = user.eid
  await init();

});

</script>

<style scope>
* {
  padding: 0;
  margin: 0;
}

.box {
  margin-right: 200px;
}

.title {
  border: 1px solid #e0e0e0;
  border-bottom: none;
  background-color: #f3f3f3;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  padding-left: 15px;
  color: #666666;
}

.cont {
  border: 1px solid #e0e0e0;
  background-color: #fff;
  height: 60px;
  line-height: 60px;
}

.sel {
  width: 120px;
  margin-left: 20px;
}

.btn {
  margin-left: 5px;
  font-size: 14px;
  color: #39f;
  cursor: pointer;
}

.enterpriseBtn {
  float: right;
  margin-top: 10px;
  margin-right: 10px;
}
</style>
